<template>
  <div class="people">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="用户头像" prop="avatarUrl">
        <template #default="scope">
          <el-avatar :src="scope.row.avatarUrl" />
        </template>
      </el-table-column>
      <el-table-column label="身高" prop="height">
        <template #default="scope"> {{ scope.row.height }}cm </template>
      </el-table-column>
      <el-table-column label="体重" prop="weight">
        <template #default="scope"> {{ scope.row.weight }}kg </template>
      </el-table-column>
      <el-table-column label="婚姻状态" prop="hunyinState" />
      <el-table-column label="居住地址" prop="hujiPlace" />
      <el-table-column label="工作地址" prop="workPlace" />
      <el-table-column label="居住状态" prop="houseState" />
      <el-table-column label="微信" prop="weixin" />
      <el-table-column label="审核状态" prop="state">
        <template #default="scope">
          <el-switch
            v-model="scope.row.state"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="b"
            :inactive-value="a"
            @change="stateChange(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="请输入搜索内容"
            @keyup="searchFun"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改信息</el-button
          >
          <el-button size="small" @click="delPeo(scope.$index, scope.row)"
            >删除用户</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      title="修改信息"
      width="30%"
      class="changeMsg"
    >
      <template #default>
        <p class="head">
          <span>用户头像：</span>
          <span class="img">
            <el-upload
              class="avatar-uploader"
              action="http://114.55.37.219:9090/files/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="checkMsg?.avatarUrl != ''"
                :src="checkMsg.avatarUrl"
                class="avatar"
              />
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </span>
        </p>
        <p>
          <span>用户名：</span>
          <input class="msg" type="text" v-model="checkMsg.username" />
        </p>
        <p>
          <span>性别：</span>
          <input class="msg" type="text" v-model="checkMsg.sex" />
        </p>
        <p>
          <span>身高：</span>
          <input class="msg" type="text" v-model="checkMsg.height" />
        </p>
        <p>
          <span>体重：</span>
          <input class="msg" type="text" v-model="checkMsg.weight" />
        </p>
        <p>
          <span>手机号：</span>
          <input class="msg" type="text" v-model="checkMsg.phone" />
        </p>
        <p>
          <span>微信：</span>
          <input class="msg" type="text" v-model="checkMsg.weixin" />
        </p>
        <p>
          <span>出生日期：</span>
          <input
            class="msg"
            type="datetime-local"
            v-model="checkMsg.birthday"
          />
        </p>
        <p>
          <span>职业：</span>
          <input class="msg" type="text" v-model="checkMsg.career" />
        </p>
        <p>
          <span>工作地址：</span>
          <input class="msg" type="text" v-model="checkMsg.workPlace" />
        </p>
        <p>
          <span>居住状态：</span>
          <input class="msg" type="text" v-model="checkMsg.houseState" />
        </p>
        <p>
          <span>婚姻状态：</span>
          <input class="msg" type="text" v-model="checkMsg.hunyinState" />
        </p>
        <p>
          <span>居住地址：</span>
          <input class="msg" type="text" v-model="checkMsg.hujiPlace" />
        </p>
      </template>
      <template #footer>
        <el-button type="primary" plain @click.stop="submitMsg">提交</el-button>
        <el-button type="warning" plain>重置</el-button>
      </template>
    </el-dialog>
    <el-pagination
      class="abcd"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :small="true"
      :disabled="false"
      layout="prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getAllPeople, changeAdmin, delAdmin } from "@/require/index.js";
//模糊查询字段
let search = ref("");
//表格渲染数据
let tableData = ref([]);
//获取总共数据
let total = ref(0);
//修改信息弹窗判断
let dialogVisible = ref(false);
let a = 0;
let b = 1;

//分页数据
let currentPage = ref(1);
let pageSize = ref(7);

// 修改对象数组id
let cid = 0;

//修改信息对象
let checkMsg = ref({});
let { data } = await getAllPeople({
  pageNum: currentPage.value,
  pageSize: pageSize.value,
  username: "",
});
tableData.value = data.data.records;
total = data.data.total;
// 上传图片回掉
const handleAvatarSuccess = (value) => {
  checkMsg.value.avatarUrl = value;
};
//表格操作模块
//修改用户信息
const handleEdit = (index, row) => {
  checkMsg.value = JSON.parse(JSON.stringify(row));
  checkMsg.value.uid = checkMsg.value.id;
  dialogVisible.value = true;
  cid = index;
};
// 分页页数改变
const handleCurrentChange = async (value) => {
  currentPage.value = value;
  let { data } = await getAllPeople({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    username: "",
  });
  tableData.value = data.data.records;
  total = data.data.total;
};
const handleSizeChange = () => {};
// 提交用户修改数据
const submitMsg = async () => {
  let { data } = await changeAdmin({
    ...checkMsg.value,
  });
  console.log(data);
  if (data.code == "200") {
    console.log(tableData.value[cid]);
    tableData.value[cid] = { ...checkMsg.value };
  }
};
const stateChange = async (a, b) => {
  let { data } = await changeAdmin({ ...b });
};
// 防抖函数
function debounce(fn) {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, 1000);
  };
}
const check = async () => {
  let { data } = await getAllPeople({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    username: search.value,
  });
  tableData.value = data.data.records;
  total = data.data.total;
};
let asd = debounce(check);
let arr = [8, 37, 39, 20];
// 搜索用户
const searchFun = (e) => {
  if (arr.indexOf(e.keyCode) == -1) {
    asd();
  }
};

const delPeo = async (a, b) => {
  let { data } = await delAdmin([b.id]);
  if (data.code == "200") {
    tableData.value.splice(a, 1);
    let { data } = await getAllPeople({
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      username: "",
    });
    tableData.value = data.data.records;
    total = data.data.total;
  }
};
</script>

<style lang="less" scoped>
.people {
  width: 100%;
  height: calc(100vh - 105px);
}

.abcd {
  position: absolute;
  left: 50%;
  bottom: 10px;
  // transform: translateX(-50%);
}

.head {
  .img {
    width: 200px;
    height: 50px;
    display: inline-block;
    // border-radius: 50%;
    // overflow: hidden;

    img {
      width: 100%;
    }
  }
}

.msg {
  border: none;
  outline: none;
}

.changeMsg {
  p {
    height: 30px;
    line-height: 30px;
    span {
      display: inline-block;
      height: 100%;
      line-height: 30px;
      font-weight: 600;
    }
  }
  .head {
    height: 60px;

    margin-bottom: 30px;
  }
}

.el-upload {
  width: 100px;
}
.avatar-uploader {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  // overflow: hidden;
  .avatar-uploader-icon {
    // margin: 0 20px;
    margin-left: 20px;
    // width: 50px;
    font-size: 50px;
    height: 50px;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
